<!-- 购入剧本 -->
<template>
    <div class="Script">
        <el-form :model="form" label-width="120px">
            <!-- 剧本名字 -->
            <el-form-item label="剧本名字">
                <el-input v-model="form.scriptName" />
            </el-form-item>
            <!-- 出版工作室 -->
            <el-form-item label="出版工作室">
                <el-input v-model="form.office" />
            </el-form-item>
            <!-- 游戏人数 -->
            <el-form-item label="游戏人数">
                <el-select v-model="form.peopleNum" placeholder="选择游戏人数">
                    <el-option label="5人" value="5" />
                    <el-option label="6人" value="6" />
                    <el-option label="7人" value="7" />
                    <el-option label="8人" value="8" />
                </el-select>
            </el-form-item>
            <!-- 游戏时常 -->
            <el-form-item label="游戏时常">
                <el-input v-model="form.gameTime" />
            </el-form-item>
            <!-- 难度 -->
            <el-form-item label="难度">
                <!-- <el-input v-model="form.level" /> -->
                <el-select v-model="form.level" placeholder="难度">
                    <el-option label="简单" value="0" />
                    <el-option label="进阶" value="1" />
                    <el-option label="烧脑" value="2" />
                </el-select>
            </el-form-item>
            <!-- 销售单价 -->
            <el-form-item label="销售单价">
                <el-input v-model="form.scriptPrice" />
            </el-form-item>
            <!-- 购入总价 -->
            <el-form-item label="购入总价">
                <el-input v-model="form.buyPrice" />
            </el-form-item>
            <!-- 剧本描述 -->
            <el-form-item label="剧本描述">
                <el-input v-model="form.scriptDescribe" type="textarea" />
            </el-form-item>
            <!-- 剧本创建时间 -->
            <el-form-item label="剧本创建时间">
                <!-- <el-input v-model="form.scriptCreateDate" /> -->
                <el-col :span="11">
                    <el-date-picker v-model="form.scriptCreateDate" type="date" placeholder="Pick a date"
                        style="width: 100%" />
                </el-col>
            </el-form-item>
            <!-- 剧本房间 -->
            <el-form-item label="剧本房间">
                <!-- <el-input v-model="form.scriptRoom" /> -->
                <el-select v-model="form.scriptRoom" placeholder="剧本房间">
                    <el-option label="休闲房" value="0" />
                    <el-option label="其他房" value="1" />
                    <el-option label="古风房" value="2" />
                </el-select>
            </el-form-item>
            <!-- 提交按钮 -->
            <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>

</template>

<script setup>
import api from '@/utils/api';
import { onMounted, reactive } from 'vue'

const form = reactive({
    scriptName: '',
    office: '',
    peopleNum: '',
    gameTime: '',
    level: '',
    scriptPrice: '',
    buyPrice: '',
    scriptDescribe: '',
    scriptCreateDate: '',
    scriptRoom: ''
})

const onSubmit = () => {
    console.log('表单数据', form)
    api.buyScript(form).then(res => {
        console.log(res);
    })
}

</script>
